<template>
  <div>
    <!-- 电脑验光 -->
    <el-divider :id="`region_${props.regionId}`">
      {{ props.title }}
    </el-divider>
    <table class="region_data">
      <thead>
        <tr>
          <th class="set_bg">
            {{ props.title }}
          </th>
          <th class="title_bg">球镜</th>
          <th class="title_bg">柱镜</th>
          <th class="title_bg">轴位</th>
          <th class="title_bg">角膜曲率均值</th>
          <th class="title_bg">角膜散光</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>OD</th>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_right_s_avg`)">
            <el-input
              v-model="data_form.right_s_avg"
              placeholder="请输入右眼球镜"
              :data-field="`${props.regionId}_right_s_avg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_right_s_avg`"
            />
            <span v-else>
              <span v-if="data_form.right_s_avg">
                {{ data_form.right_s_avg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_right_c_avg`)">
            <el-input
              v-model="data_form.right_c_avg"
              placeholder="请输入右眼柱镜"
              :data-field="`${props.regionId}_right_c_avg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_right_c_avg`"
            />
            <span v-else>
              <span v-if="data_form.right_c_avg">
                {{ data_form.right_c_avg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_right_a_avg`)">
            <el-input
              v-model="data_form.right_a_avg"
              placeholder="请输入右眼轴位"
              :data-field="`${props.regionId}_right_a_avg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_right_a_avg`"
            />
            <span v-else>
              <span v-if="data_form.right_a_avg">
                {{ data_form.right_a_avg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_membraneCurvatureRight`)
            "
          >
            <el-input
              v-model="data_form.membraneCurvatureRight"
              placeholder="请输入右眼角膜曲率均值"
              :data-field="`${props.regionId}_membraneCurvatureRight`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_membraneCurvatureRight`
              "
            />
            <span v-else>
              <span v-if="data_form.membraneCurvatureRight">
                {{ data_form.membraneCurvatureRight }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_rightAst`)">
            <el-input
              v-model="data_form.rightAst"
              placeholder="请输入右眼散光"
              :data-field="`${props.regionId}_rightAst`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_rightAst`"
            />
            <span v-else>
              <span v-if="data_form.rightAst">
                {{ data_form.rightAst }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <th>OS</th>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_left_s_avg`)">
            <el-input
              v-model="data_form.left_s_avg"
              placeholder="请输入右眼球镜"
              :data-field="`${props.regionId}_left_s_avg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_left_s_avg`"
            />
            <span v-else>
              <span v-if="data_form.left_s_avg">
                {{ data_form.left_s_avg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_left_c_avg`)">
            <el-input
              v-model="data_form.left_c_avg"
              placeholder="请输入右眼柱镜"
              :data-field="`${props.regionId}_left_c_avg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_left_c_avg`"
            />
            <span v-else>
              <span v-if="data_form.left_c_avg">
                {{ data_form.left_c_avg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_left_a_avg`)">
            <el-input
              v-model="data_form.left_a_avg"
              placeholder="请输入右眼轴位"
              :data-field="`${props.regionId}_left_a_avg`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_left_a_avg`"
            />
            <span v-else>
              <span v-if="data_form.left_a_avg">
                {{ data_form.left_a_avg }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td
            @dblclick="
              handleDbClickFocus(`${props.regionId}_membraneCurvatureLeft`)
            "
          >
            <el-input
              v-model="data_form.membraneCurvatureLeft"
              placeholder="请输入右眼角膜曲率均值"
              :data-field="`${props.regionId}_membraneCurvatureLeft`"
              @blur="handleDbClickBlur"
              v-if="
                props.modelValue == `${props.regionId}_membraneCurvatureLeft`
              "
            />
            <span v-else>
              <span v-if="data_form.membraneCurvatureLeft">
                {{ data_form.membraneCurvatureLeft }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
          <td @dblclick="handleDbClickFocus(`${props.regionId}_leftAst`)">
            <el-input
              v-model="data_form.leftAst"
              placeholder="请输入右眼散光"
              :data-field="`${props.regionId}_leftAst`"
              @blur="handleDbClickBlur"
              v-if="props.modelValue == `${props.regionId}_leftAst`"
            />
            <span v-else>
              <span v-if="data_form.leftAst">
                {{ data_form.leftAst }}
              </span>
              <span v-else class="dbClickPlaceholder">
                {{ props.dbClickPlaceholder }}
              </span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";

onMounted(() => {
  // console.log(props.title);
});

const emit = defineEmits(["handleDbClickFocus", "handleDbClickBlur"]);
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  regionId: {
    type: Number,
    default: 0,
  },
  modelValue: {
    type: String,
    default: "",
  },
  dbClickPlaceholder: {
    type: String,
    default: "",
  },
});
const data_form = ref({}); // 数据

// 双击聚焦
const handleDbClickFocus = (ElementName) => {
  emit("handleDbClickFocus", ElementName);
  nextTick(() => {
    // 添加nextTick确保DOM更新后执行
    document.querySelector(`input[data-field="${ElementName}"]`)?.focus();
  });
};

// 失去焦点
const handleDbClickBlur = () => {
  emit("handleDbClickBlur", {
    regionId: props.regionId,
    data: data_form.value,
  });
};

let cleanup;
onMounted(() => {
  cleanup = watchStorage("refresh_region_data", (e) => {
    data_form.value = e.data.computer_optometry_data;
  });

  // 组件卸载时清理监听
  return () => cleanup();
});

onBeforeUnmount(() => {
  cleanup();
});
</script>

<style scoped lang="scss">
.title_bg {
  @apply w-[17%];
}
</style>